<template>
	<view class="">
		<view class="logistics-item" v-for="(item, index) in logisticsList" :key="index">
			<template v-if="isSplit == 1">
			<view class="goods-box">
				<scroll-view scroll-x="true" style="white-space:nowrap;">
				<u-image width="160rpx" height="160rpx" class="img" v-for="(gg,gi) in item.goods_photos" :src="photoBaseUrl + gg" :key="gi"></u-image>
				</scroll-view>
			</view>
			<view style="clear: both;"></view>
			</template>
			<u-collapse :itemStyle="headStyle">
				<u-collapse-item :title="item.express_com + ' : ' + item.express_sn" :open="index == 0">
					<view class="" style="padding: 10rpx;border-top:1px solid #CCC">
					<u-time-line>
						<u-time-line-item v-for="(l,j) in item.list" :key="j">
							<template v-slot:content>
								<view>
									<view class="u-order-desc">{{ l.content }}</view>
									<view class="u-order-time">{{ l.time }}</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
export default {
	name:'order-logistics',
	data() {
		return {
			headStyle: {
				border: '1px solid #CCC',
				paddingLeft: '15px',
			},
			photoBaseUrl:'',
			isSplit:'',
			logisticsList: [
				{
					title: '顺丰快递：1111111',
					list: [
						{
						      "time": "2017-07-07 11:07:13",
						      "content": "已签收,感谢使用顺丰,期待再次为您服务"
						    },
						    {
						      "time": "2017-07-07 08:12:12",
						      "content": "快件交给郑卫*，正在派送途中"
						    },
						    {
						      "time": "2017-07-07 06:52:56",
						      "content": "快件到达 【中山港口水禾园营业部】"
						    },
						    {
						      "time": "2017-07-06 23:55:53",
						      "content": "快件到达 【中山东升集散中心】"
						    },
						    {
						      "time": "2017-07-06 23:55:53",
						      "content": "快件在【中山东升集散中心】已装车，准备发往 【中山港口水禾园营业部】"
						    },
						    {
						      "time": "2017-07-06 21:17:36",
						      "content": "快件在【珠海界涌集散中心】已装车，准备发往 【中山东升集散中心】"
						    },
						    {
						      "time": "2017-07-06 21:17:36",
						      "content": "快件到达 【珠海界涌集散中心】"
						    },
						    {
						      "time": "2017-07-06 19:38:09",
						      "content": "快件在【珠海香洲景园路营业部】已装车，准备发往 【珠海界涌集散中心】"
						    },
						    {
						      "time": "2017-07-06 18:05:01",
						      "content": "顺丰速运 已收取快件"
						    }
					],
				},
				{
					title: '顺丰快递：222222222222',
					list: [
						{
						      "time": "2017-07-07 11:07:13",
						      "content": "已签收,感谢使用顺丰,期待再次为您服务"
						    },
						    {
						      "time": "2017-07-07 08:12:12",
						      "content": "快件交给郑卫*，正在派送途中"
						    },
						    {
						      "time": "2017-07-07 06:52:56",
						      "content": "快件到达 【中山港口水禾园营业部】"
						    },
						    {
						      "time": "2017-07-06 23:55:53",
						      "content": "快件到达 【中山东升集散中心】"
						    },
						    {
						      "time": "2017-07-06 23:55:53",
						      "content": "快件在【中山东升集散中心】已装车，准备发往 【中山港口水禾园营业部】"
						    },
						    {
						      "time": "2017-07-06 21:17:36",
						      "content": "快件在【珠海界涌集散中心】已装车，准备发往 【中山东升集散中心】"
						    },
						    {
						      "time": "2017-07-06 21:17:36",
						      "content": "快件到达 【珠海界涌集散中心】"
						    },
						    {
						      "time": "2017-07-06 19:38:09",
						      "content": "快件在【珠海香洲景园路营业部】已装车，准备发往 【珠海界涌集散中心】"
						    },
						    {
						      "time": "2017-07-06 18:05:01",
						      "content": "顺丰速运 已收取快件"
						    }
					],
				},
				{
					title: '顺丰快递：222222222222',
					list: [
						{
						      "time": "2017-07-07 11:07:13",
						      "content": "已签收,感谢使用顺丰,期待再次为您服务"
						    },
						    {
						      "time": "2017-07-07 08:12:12",
						      "content": "快件交给郑卫*，正在派送途中"
						    },
						    {
						      "time": "2017-07-07 06:52:56",
						      "content": "快件到达 【中山港口水禾园营业部】"
						    },
						    {
						      "time": "2017-07-06 23:55:53",
						      "content": "快件到达 【中山东升集散中心】"
						    },
						    {
						      "time": "2017-07-06 23:55:53",
						      "content": "快件在【中山东升集散中心】已装车，准备发往 【中山港口水禾园营业部】"
						    },
						    {
						      "time": "2017-07-06 21:17:36",
						      "content": "快件在【珠海界涌集散中心】已装车，准备发往 【中山东升集散中心】"
						    },
						    {
						      "time": "2017-07-06 21:17:36",
						      "content": "快件到达 【珠海界涌集散中心】"
						    },
						    {
						      "time": "2017-07-06 19:38:09",
						      "content": "快件在【珠海香洲景园路营业部】已装车，准备发往 【珠海界涌集散中心】"
						    },
						    {
						      "time": "2017-07-06 18:05:01",
						      "content": "顺丰速运 已收取快件"
						    }
					],
				}
			],
		};
	},
	methods: {
		getData(_orderId){
			this.$api.order.getLogistics({order_id:_orderId}).then(res => {
				this.logisticsList = res
				console.log(res)
			})
		},
		setData(_res){
			this.logisticsList = _res.logistics_list
			this.photoBaseUrl = _res.photo_base_url
			this.isSplit = _res.is_split
		}
	}
}
</script>

<style lang="scss" scoped>
	.goods-box{
		padding: 30rpx;
		white-space: nowrap;
		display: flex;
		
		.img{
			display: inline-block;
			margin-left: 30rpx;
			
			&:first-child{
				margin-left: 0;
			}
		}
	}
	.u-order-desc {
		color: #333;
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: #AAA;
		font-size: 26rpx;
	}
</style>
